<template>
  <div class='inputselect' @mouseleave="selectshow=false">
    <input type="text" placeholder="请选择" v-model="value" @click="selectshow=!selectshow"  readonly>
    <ul :class='[selectshow?"ulactive":""]' v-if="list" >
      <li v-for='(item,index) in list' :key='index' @click='change(item)' v-if='item' >
        {{item}}
      </li>
    </ul>
    <img src="../../../static/images/san.png" alt="" style='position: relative; left: -30px;' @click='selectshow=!selectshow'>
  </div>
</template>
<script>
export default {
  methods: {
    ul_show() {},
    change(item) {
      this.value = item;
      this.selectshow = false;
      //
      // alert(111)
    }
  },
  data() {
    return {
      selectshow: false,
      value: ""
    };
  },
  props: ["list"]
};
</script>
<style lang='less' scoped>
.inputselect {
  display: inline-block;
  position: relative;
  // width: 190px;
  // box-sizing: border-box;
  > input {
    height: 38px;
    width: 190px;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid #b4b4b4;
    border-radius: 2px;
    padding-left: 10px;
    color: #30383e;
    outline:none;
    @media (max-width: 1300px) {
      width: 120px;
    }
    &:focus {
       border: 1px solid #ffa200;

    }
  }
  > ul {
    overflow: hidden;
    max-height: 0px;
    position: absolute;
    transition: max-height 0.3s ease;
    width: 190px;
    padding: 0;
    z-index: 100;
    box-sizing: border-box;
    border-radius: 4px;
    color: #30383e;
    border: 1px solid #c9cfda;
    border-top: none;
    border-bottom: none;
    background-color: white;
    @media (max-width: 1300px) {
      width: 120px;
    }
    > li {
      height: 40px;
      border-bottom: 1px solid #fff3d9;
      width: 100%;
      box-sizing: border-box;
      padding-left: 10px;
      &:hover {
        background-color: #fff3d9;
        color: #ffa200;
      }
    }
    > li:last-child {
      border-bottom: none;
    }
  }
  .ulactive {
    max-height: 400px;
    border-top: 1px solid #c9cfda;
    border-bottom: 1px solid #c9cfda;
    transform: scale(1);
  }
}
</style>

